<template>
	<view>

		<!-- 绑定手机号   -->
		<view class="tn-margin tn-padding" v-if="!hadBoundPhone">
			<u-gap :height="80" />
			<view class="tn-flex tn-flex-row-center tn-text-bold ">为了避免数据丢失，请绑定您的真实手机号</view>
			<!-- 微信小程序 -->
			<tn-form :model="bindPhoneUserForm" ref="form" :errorType="['message']" v-if="isWechat">
				<tn-form-item :labelWidth="150" label="姓名:" prop="nickname">
					<tn-input v-model="bindPhoneUserForm.name" />
				</tn-form-item>
			</tn-form>
			<view class="tn-flex tn-flex-row-center tn-margin-top" v-if="isWechat">
				<view style="width: 100%">
					<u-button shape="circle" type="success" open-type="getPhoneNumber"
						@getphonenumber="decryptPhoneNumber">一键绑定微信注册手机号</u-button>
				</view>
			</view>
			<!-- h5 -->
			<tn-form :model="bindPhoneUserForm" ref="form" :errorType="['message']" v-if="!isWechat">
				<tn-form-item :labelWidth="150" label="名称:" prop="nickname">
					<tn-input v-model="bindPhoneUserForm.name" />
				</tn-form-item>
				<tn-form-item :labelWidth="150" label="手机号码:" prop="mobile">
					<tn-input v-model="bindPhoneUserForm.phone" />
				</tn-form-item>
			</tn-form>
			<view class="tn-flex tn-flex-row-center tn-margin-top" v-if="!isWechat">
				<view style="width: 100%">
					<u-button shape="circle" type="success" @click="h5PhoneNumber()">绑定手机号</u-button>
				</view>
			</view>
		</view>

		<!-- 邀请好友   -->
		<view class="content" v-else>
			<!--   自定义导航栏  -->
			<tn-nav-bar fixed alpha :is-back="true">
				<text class="tn-text-bold">邀请好友</text>
			</tn-nav-bar>
			<view :style="{paddingTop: vuex_custom_bar_height + 'px'}" />

			<top-user-info />

			<!--   我的收益   -->
			<view class="dm-box">
				<view class=" tn-flex tn-flex-row-between">
					<view class="tn-flex tn-text-bold">我的收益</view>
					<view class="tn-flex ">
						<view class="dm-button-sm" style="background-color: #FF3D71;color: #FFFFFF;margin-right: 10px"
							@click="tn('/pages_sub/invite/earning_detail')">收益明细</view>
						<view class="dm-button-sm"
							style="background: linear-gradient(90deg, #3D3D3D 10%, #898989 100%);;color: #FFFFFF"
							@click="tn('/pages_sub/withdraw/withdraw')">去提现</view>
					</view>
				</view>

				<view class="tn-flex tn-flex-row-between tn-margin-top">
					<view>
						<view>可提现(元)</view>
						<view class="money">{{ commissionPanel.commission_balance/100 }}</view>
					</view>
					<view>
						<view>今日收益(元)</view>
						<view class="money">{{ commissionPanel.today_commission/100 }}</view>
					</view>
				</view>
				<view class="tn-flex tn-flex-row-between tn-margin-top-xl">
					<view>
						<view class="tn-color-gray">今日订单</view>
						<view class="money">{{ commissionPanel.today_recharge_num }}</view>
					</view>
					<view>
						<view class="tn-color-gray">昨日订单</view>
						<view class="money">{{commissionPanel.yesterday_recharge_num}}</view>
					</view>
					<view>
						<view class="tn-color-gray">昨日收益(元)</view>
						<view class="money">{{commissionPanel.yesterday_commission/100}}</view>
					</view>
				</view>

				<view class="dm-horizontal-line-xl--grey" style="width: 100%" />

				<view>
					<view>
						<view class="tn-flex tn-text-bold">广告收益</view>
					</view>
					<view class="tn-flex tn-flex-row-between tn-margin-top">
						<view>
							<view>累计收益(元)</view>
							<view class="money">{{ commissionPanel.invite_ad/100 }}</view>
						</view>
						<view>
							<view>当月收益(元)</view>
							<view class="money">{{ commissionPanel.invite_ad_month/100 }}</view>
						</view>
					</view>
				</view>
			</view>

			<view class="dm-box tn-flex tn-flex-row-between tn-margin-top"
				style="background: linear-gradient(10deg, #FFFFFF 42%, #FFEAF0 73%);"
				@tap="tn('/pages_sub/withdraw/withdraw_detail')">
				<view class="tn-flex">
					<text class="tn-text-bold">提现记录</text>
					<text class="tn-margin-left tn-text-sm tn-color-gray--dark">将会展示您的提现记录</text>
				</view>
				<view class="tn-flex tn-flex-row-right tn-text-sm tn-color-gray--dark">
					>
				</view>
			</view>

			<view class="tn-flex tn-flex-row-between tn-margin-xl">
				<view style="width: 100px">
					<u-button :custom-style="{background:'#FF3D71',color:'#FFF',border:'0px'}" openType="share"
						text="分享" shape="circle">邀请好友</u-button>
				</view>
				<view style="width: 100px">
					<u-button :custom-style="{background:'#FF3D71',color:'#FFF',border:'0px'}" shape="circle"
						@click="tn('/pages_sub/invite/my_invitee')">我的好友</u-button>
				</view>
				<view style="width: 100px">
					<u-button :custom-style="{background:'#FF3D71',color:'#FFF',border:'0px'}" shape="circle"
						@click="tn('/pages_sub/invite/to_invite')">我的邀请码</u-button>
				</view>
			</view>

		</view>

		<banner-ad :config="this.adConfig.wx_banner_invite" />

	</view>
</template>

<script>
	import common_mixin from '@/libs/mixin/common_mixin.js'
	import TopUserInfo from "@/components/top-user-info/top-user-info.vue";
	import BannerAd from "@/components/banner-ad/banner-ad.vue";
	import UGap from "../../uni_modules/uview-ui/components/u-gap/u-gap.vue";
	import UButton from "../../uni_modules/uview-ui/components/u-button/u-button.vue";
	import TnButton from "../../uni_modules/tuniao-ui/components/tn-button/tn-button.vue";
	import Config from "../../utils/config";
	import {
		bindWeChatUserPhone,
		commissionPanel,
		invitePanel
	} from "../../api/api";
	import store from "../../store";

	export default {
		components: {
			UButton,
			UGap,
			BannerAd,
			TopUserInfo,
			TnButton
		},
		mixins: [common_mixin],
		data() {
			return {
				bindPhoneUserForm: {
					name: "",
					phone:""
				},
				tip: "获取验证码",
				hadBoundPhone: false,
				commissionPanel: {},
				isWechat:Config.isWeChat
			}
		},
		onShow() {
			if (this.vuex_user.mobile) {
				this.hadBoundPhone = true;
			} else {
				this.hadBoundPhone = false;
			}
			this.getCommissionPanel();
		},
		methods: {
			//一键绑定微信注册手机号
			async decryptPhoneNumber(data) {
				console.log(data)
				console.log(data.detail)
				let code = data.detail.code;
				let params = {
					appid: Config.appId,
					name: this.bindPhoneUserForm.name,
					decryptPhoneNumberCode: code
				}
				let res = await this.$api.bindWeChatUserPhone(params)
				this.bindDone(res);
			},
			//H5绑定手机号
			async h5PhoneNumber(){
				console.log(this.bindPhoneUserForm);
				this.bindPhoneUserForm.name = this.bindPhoneUserForm.name.trim();
				this.bindPhoneUserForm.phone = this.bindPhoneUserForm.phone.trim();
				if(!this.bindPhoneUserForm.phone){
					uni.showToast({
						title:'请输入电话号码',
						icon:'none'
					})
					return false;
				}
				let res = await this.$api.bindUserPhone({
					mobile:this.bindPhoneUserForm.phone,
					nickname:this.bindPhoneUserForm.name
				})
				this.bindDone(res);
			},
			bindDone(res){
				if(!res){
					return false;
				}
				let userinfo = res.userinfo
				if (userinfo) {
					this.hadBoundPhone = true;
					store.commit('$tStore', {
						name: 'vuex_user',
						value: userinfo
					})
				}
			},
			async getCommissionPanel() {
				let data = await this.$api.commissionPanel();
				this.commissionPanel = data
			},
			onShareAppMessage(res) {
				console.log('分享', res);
				return {
					title: Config.appName, // 默认为小程序名称
					path: '/pages/index/index?path=invite&invite_code=' + this.vuex_user.my_invite_code,
					imageUrl: 'http://static.playlet.5884.cn/playlet/img/my/laien-logo.jpeg', // 默认为当前页面的截图
					success: (res) => {
						// 转发成功
						console.log('转发成功:', res);
					},
					fail: function(res) {
						console.log('转发失败:', res);
					},
				}
			},
			getCode() {
				if (this.$refs.verificationCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					setTimeout(() => {
						uni.hideLoading()
						// 这里此提示会被this.start()方法中的提示覆盖
						this.toast('验证码已发送')
						// 通知验证码组件内部开始倒计时
						this.$refs.verificationCode.start()
					}, 2000)
				}
			},
			codeEnd() {
				console.log("倒计时结束")
			},
			codeStart() {
				console.log("倒计时开始")
			},
			codeChange(text) {
				this.tip = text
			},
		}
	}
</script>

<style>
	page {
		background-color: #fafafa;
	}
</style>